<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html >
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
    <title>Bootstrap分页实例</title>
    <%--<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>--%>
    <link href="<%=request.getContextPath()%>/resources/js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="<%=request.getContextPath()%>/resources/js/jQuery/jquery-2.1.4.min.js"></script>
    <script src="<%=request.getContextPath()%>/resources/js/bootstrap/js/bootstrap.min.js"></script>

    <script src="<%=request.getContextPath()%>/resources/js/bootstrap/js/bootstrap-paginator.min.js"></script>
    <style type="text/css">
        #queryDiv {
            margin-right: auto;
            margin-left: auto;
            width: 600px;
        }

        #textInput {
            margin-top: 10px;
        }

        #tableResult {
            margin-right: auto;
            margin-left: auto;
            width: 600px;
        }

        td {
            width: 150px
        }
    </style>
</head>
<body>
<div id="queryDiv">
    <H3 class="text-info">欢迎你少年：${loginUser.loginName}</H3>
    <a href="<%=request.getContextPath()%>/login/logout">退出</a>
    <strong><a class="text-success" href="add">添加</a></strong>
    <input id="textInput" type="text" placeholder="请输入用户名">
    <button id="queryButton" class="btn btn-primary" type="button">查询</button>
</div>
<form id="form1">
    <table class="table table-bordered" id='tableResult'>
        <caption>查询用户结果</caption>
        <thead>
        <tr>
            <th>序号</th>
            <th>用户名</th>
            <th>密码</th>
            <th>用户邮箱</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tableBody">
        </tbody>
    </table>
    <!-- 底部分页按钮 -->
    <div id="bottomTab"></div>
</form>
<script type='text/javascript'>
    var PAGESIZE = 10;

    //bootrap的配置
    var options = {
        currentPage: 1,  //当前页数
        totalPages: 10,  //总页数，这里只是暂时的，后头会根据查出来的条件进行更改
        size: "normal",
        alignment: "center",
        itemTexts: function (type, page, current) {
            switch (type) {
                case "first":
                    return "第一页";
                case "prev":
                    return "前一页";
                case "next":
                    return "后一页";
                case "last":
                    return "最后页";
                case "page":
                    return page;
            }
        },
        onPageClicked: function (e, originalEvent, type, page) {
            var userName = $("#textInput").val(); //取内容
            buildTable(userName, page, PAGESIZE);//默认每页最多10条
        }
    }

    //获取当前项目的路径
    var urlRootContext = (function () {
        var strPath = window.document.location.pathname;
        var postPath = strPath.substring(0, strPath.substr(1).indexOf('/') + 1);
        return postPath;
    })();


    //生成表格
    function buildTable(userName, pageNumber, pageSize) {
        var url = urlRootContext + "/list"; //请求的网址
        var reqParams = {'userName': userName, 'pageNumber': pageNumber, 'pageSize': pageSize};//请求数据
        $(function () {
            $.ajax({
                type: "POST",
                url: url,
                data: reqParams,
                async: false,
                dataType: "json",
                success: function (data) {
                    if (data.isError == false) {
                        // options.totalPages = data.pages;
                        var newoptions = {
                            currentPage: 1,  //当前页数
                            totalPages: data.pages == 0 ? 1 : data.pages,  //总页数
                            size: "normal",
                            alignment: "center",
                            itemTexts: function (type, page, current) {
                                switch (type) {
                                    case "first":
                                        return "第一页";
                                    case "prev":
                                        return "前一页";
                                    case "next":
                                        return "后一页";
                                    case "last":
                                        return "最后页";
                                    case "page":
                                        return page;
                                }
                            },
                            onPageClicked: function (e, originalEvent, type, page) {
                                var userName = $("#textInput").val(); //取内容
                                buildTable(userName, page, PAGESIZE);//默认每页最多10条
                            }
                        }
                        $('#bottomTab').bootstrapPaginator("setOptions", newoptions); //重新设置总页面数目
                        var dataList = data.dataList;
                        $("#tableBody").empty();//清空表格内容
                        if (dataList.length > 0) {
                            $(dataList).each(function () {//重新生成
                                $("#tableBody").append('<tr>');
                                $("#tableBody").append('<td>' + this.userId + '</td>');
                                $("#tableBody").append('<td>' + this.userName + '</td>');
                                $("#tableBody").append('<td>' + this.userPassword + '</td>');
                                $("#tableBody").append('<td>' + this.userEmail + '</td>');
                                $("#tableBody").append('<td><a href="'+this.userId+'/update">修改</a></td>');
                                $("#tableBody").append('<td><a href="'+this.userId+'/delete">删除</a></td>');
                                $("#tableBody").append('</tr>');
                            });
                        } else {
                            $("#tableBody").append('<tr><th colspan ="4" style="text-align:center">查询无数据</th></tr>');
                        }
                    } else {
                        alert(data.errorMsg);
                    }
                },
                error: function (e) {
                    alert("查询失败:" + e);
                }
            });
        });
    }

    //渲染完就执行
    $(function () {

        //生成底部分页栏
        $('#bottomTab').bootstrapPaginator(options);

        buildTable("", 1, 10);//默认空白查全部

        //创建结算规则
        $("#queryButton").bind("click", function () {
            var userName = $("#textInput").val();
            buildTable(userName, 1, PAGESIZE);

        });


    });



</script>
</body>
</html>